﻿
@{
    ViewBag.Title = "资料上传";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@*母版需要引入以下js和css   似乎只用到bootstrap了。我的auto.js也不是必须的，也没有用到日期和弹窗
    必须     "~/Scripts/bootstrap3.3.6/css/bootstrap.css",
    必须     Scripts/bootstrap-datepicker-master/dist/css/bootstrap-datepicker.css",
           "~/Scripts/toastr.2.1.2/toastr.css",
    必须      "~/Scripts/autoJS/auto.css"

    必须    "~/Scripts/jquery-2.2.3.min.js",
    必须    "~/Scripts/bootstrap3.3.6/js/bootstrap.js",
        "~/Scripts/bootstrap-datepicker-master/dist/js/bootstrap-datepicker.js",
        "~/Scripts/bootstrap-datepicker-master/dist/locales/bootstrap-datepicker.zh-CN.min.js",
    必须    "~/Scripts/lodash/lodash.js",
        "~/Scripts/layer/layer.js",
        "~/Scripts/toastr.2.1.2/toastr.min.js",
    必须    "~/Scripts/autoJS/auto.js",

     其它几个是弹窗或日期。
    引入通用的脚本和样式之后，需要引入本页面的代码

    <link href="~/Scripts/fileicon/fileicon.css" rel="stylesheet" />    //显示图标的一个小工具，似乎兼容 ie9以上
    <link href="~/Scripts/webuploader/webuploader.css" rel="stylesheet" />
    <script src="~/Scripts/webuploader/webuploader.js"></script>        //百度上传  0.1.6  。官网说有0.1.8但找不到下载
    <script src="~/AppTS/ZLSC.js"></script>

    最后这几个所属专业等从数据库读取。现在重点是你先测一下代码，看后台如何接收
*@
<style>
    #uploader .filelist { min-height: 140px; }
        #uploader .filelist li { position: relative; display: inline; float: left; overflow: hidden; width: 110px; height: 110px; border: thin solid #ddd; text-align: center; margin: 0 8px 20px 0; font-size: 12px; }
            #uploader .filelist li .title { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
            #uploader .filelist li .progress { position: absolute; bottom: 0; margin-bottom: 0; width: 100%; height: 2px; }
            #uploader .filelist li .progress-bar { }
            #uploader .filelist li .fileicon { position: absolute; top: 18px; padding: 10px; width: 100%; height: 90px; }
                #uploader .filelist li .fileicon > .file-icon { margin: 0 auto; }
            #uploader .filelist li .tool-trash { display: none; position: absolute; top: 0; background: rgba( 0, 0, 0, 0.5 ); width: 100%; height: 0; top: 18px; left: 0; overflow: hidden; z-index: 300; transition: height 0.6s; }
            #uploader .filelist li:hover .tool-trash { display: block; height: 30px; }
            #uploader .filelist li .tool-trash span { margin: 8px; }
                #uploader .filelist li .tool-trash span:hover { color: rgb(92, 202, 255); }
    #uploader .statusBar { position: relative; }
        #uploader .statusBar .progress { width: 198px; height: 18px; display: inline-block; margin-bottom: 0; margin-right: 10px; }
        #uploader .statusBar .progress-bar { }
        #uploader .statusBar .info { display: inline-block; font-size: 14px; color: #666666; }
        #uploader .statusBar .btns { position: absolute; display: inline-block; top: -10px; right: 20px; line-height: 40px; }
    .btns > div { display: inline-block; line-height: 1.428571429; vertical-align: middle; margin: 0 12px 0px 0; }
    /**修正上传按钮对不齐问题*/
    #btnUpload, #btnReset { margin-bottom: 5px; }
    .webuploader-pick:hover { background: #00a2d4; }

    #uuu{width:100%;height:200px;background-color:aqua;}
</style>

<div class="panel panel-default">
    <div class="panel-heading">
        <label>所属类别:</label>
        <select id="selSSLB">
            <option>会议资料</option>
            <option>发展计划部评估会资料</option>
            <option>油田部审查会议资料</option>
            <option>横向项目资料</option>
            <option>文献资料</option>
            <option>其他</option>
        </select>
        <label>所属专业:</label>
        <select id="selSSZY">
            <option>油气储运</option>
            <option>油气加工</option>
            <option>天然气</option>
            <option>给排水</option>
            <option>供配电自控</option>
            <option>经济</option>
            <option>其他</option>
        </select>
        <label>所属油田:</label>
        <select id="selSSYT">
            <option>中石化</option>
            <option>胜利</option>
            <option>中原</option>
            <option>河南</option>
            <option>江苏</option>
            <option>江汉</option>
            <option>华东</option>
            <option>华北</option>
            <option>西南</option>
            <option>西北</option>
            <option>东北</option>
            <option>上海</option>
        </select>
    </div>
</div>
<div id="uploader" class="well">
    <div class="queueList">
        <ul class="filelist clearfix"></ul>
    </div>
    <hr />
    <div class="statusBar">
        <!--总进度条  -->
        <div class="progress">
            <div class="progress-bar"></div>
        </div>
        <div class="info"></div>
        <div class="btns">
            <div id="btnReset" class="webuploader-pick">重置</div>
            <div id="btnPickerdir">选择文件夹</div>
            <div id="btnPicker">选择文件</div>
            <div id="btnUpload" class="webuploader-pick">开始上传</div>
            <!--<div id="btnStop" class="webuploader-pick hidden">暂停上传</div> -->
        </div>
    </div>
</div>

<div id="uuu">
    here
</div>
@section scripts{
    <link href="~/Scripts/fileicon/fileicon.css" rel="stylesheet" />
    <link href="~/Scripts/webuploader/webuploader.css" rel="stylesheet" />
    <script src="~/Scripts/webuploader/webuploader.js"></script>
    <script src="~/AppTS/ZLSC.js"></script>

    <script>
        $(function () {
            $("#uuu").on("dragenter dragover", function (e) {
                e.originalEvent.stopPropagation();
                e.originalEvent.preventDefault();
                return false;
            });
            $("#uuu").on("drop", function (e) {
                var event = e.originalEvent;
                return false;
            })
        })
    </script>
}


